<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>记账 - 账单</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <main class="container py-4">
      <div class="d-flex justify-content-between align-items-center mb-4">
      <h1 class="h3">我的账单</h1>
      <button id="btnLogout" class="btn btn-outline-secondary">登出</button>
    </div>

    <div class="row">
      <div class="col-lg-5 mb-4">
        <div class="card shadow-sm">
          <div class="card-body">
            <h5 class="card-title">添加 / 编辑账单</h5>
            <div id="controls">
              <div class="mb-3">
                <label class="form-label">金额</label>
                <input id="amount" type="number" step="0.01" class="form-control" />
              </div>
              <div class="mb-3">
                <label class="form-label">类型</label>
                <select id="type" class="form-select">
                  <option value="INCOME">收入</option>
                  <option value="EXPENSE">支出</option>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">描述</label>
                <input id="description" class="form-control" />
              </div>
              <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button id="btnCreate" class="btn btn-success">添加账单</button>
                <button id="btnUpdate" class="btn btn-primary d-none">保存更改</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-7">
        <div class="card shadow-sm mb-4">
          <div class="card-body">
            <h5 class="card-title">统计</h5>
            <div id="summary" class="row g-2 align-items-end">
              <div class="col-sm-5">
                <label class="form-label">From</label>
                <input id="from" type="datetime-local" class="form-control" />
              </div>
              <div class="col-sm-5">
                <label class="form-label">To</label>
                <input id="to" type="datetime-local" class="form-control" />
              </div>
              <div class="col-sm-2">
                <button id="btnSummary" class="btn btn-outline-primary w-100">查询</button>
              </div>
            </div>
            <div id="summaryResult" class="mt-3"></div>
          </div>
        </div>

        <div class="card shadow-sm">
          <div class="card-body">
            <h5 class="card-title">账单列表</h5>
            <div class="table-responsive">
              <table class="table table-striped table-hover" id="billsTable">
                <thead>
                  <tr>
                    <th>时间</th>
                    <th>金额</th>
                    <th>类型</th>
                    <th>描述</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody id="bills"></tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <script src="/js/app.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>